<template>
  <div class="data-card">
    <!-- 背景1 -->
    <div
      class="ring_1"
      :style="{
        left: treeItem.isProject ? '148px' : '64px',
      }"
    ></div>
    <!-- 背景2 -->
    <div
      class="ring_2"
      :style="{
        left: treeItem.isProject ? '162px' : '78px',
      }"
    ></div>
    <!-- 水滴图 -->
    <div class="liquidfill-dom" ref="liquidfill-dom"></div>
    <!-- 总进度 -->
    <div
      class="total"
      :style="{
        left: treeItem.isProject ? '206px' : '120px',
      }"
    >
      <div>92.8%</div>
      <div>总进度</div>
    </div>
    <!-- 图例 -->
    <div
      class="legend-container"
      :style="{
        right: treeItem.isProject ? '192px' : '72px',
      }"
    >
      <div class="legend">
        <div class="flex">
          <div class="icon icon_1"></div>
          <div class="name">任务总数</div>
        </div>
        <div class="value">835</div>
      </div>
      <div class="legend">
        <div class="flex">
          <div class="icon icon_2"></div>
          <div class="name">已完成数</div>
        </div>
        <div class="value">774</div>
      </div>
      <div class="legend">
        <div class="flex">
          <div class="icon icon_3"></div>
          <div class="name">延期数</div>
        </div>
        <div class="value">61</div>
      </div>
    </div>
  </div>
</template>

<script>
//总进度完成情况
import "echarts-liquidfill";
import echarts from "echarts";
export default {
  props: {
    treeItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chartsInstance: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.drawerlLiquidFillChart();
    });
  },
  methods: {
    drawerlLiquidFillChart() {
      let value = 0.65;
      let chart_dom = this.$refs["liquidfill-dom"];
      this.chartsInstance = echarts.init(chart_dom);
      let baseOpt = {
        series: [
          {
            type: "liquidFill",
            radius: "55%",
            center: ["30.3%", "50%"],
            color: [
              "#12A6B7",
              new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#29F29C",
                },
                {
                  offset: 1,
                  color: "#08B0E8",
                },
              ]),
            ],
            data: [value + 0.025, value], // data个数代表波浪数
            amplitude: 6,
            // 图形样式
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0, // 波浪的阴影范围
            },
            backgroundStyle: {
              borderWidth: 0,
              color: "none",
            },
            label: {
              show: false,
            },
            outline: {
              show: false,
            },
          },
        ],
      };
      this.chartsInstance.setOption(baseOpt);
    },
  },
  destroyed() {
    this.chartsInstance && this.chartsInstance.dispose();
  },
};
</script>

<style lang="less" scoped>
.data-card {
  height: 100%;
  width: 100%;
  position: relative;
  .ring_1 {
    width: 198px;
    height: 198px;
    border-radius: 50%;
    border: 4px solid rgba(103, 213, 181, 0.5);
    position: absolute;
    top: 50%;
    left: 64px;
    transform: translateY(-50%);
  }
  .ring_2 {
    width: 170px;
    height: 170px;
    background: url(https://jszhgd.cn/static/pc/low-code/water_polo.png)
      no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 78px;
    transform: translateY(-50%);
  }
  .liquidfill-dom {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .total {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 120px;
    transform: translateY(-50%);
    font-family: D-DIN, D-DIN;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    :nth-child(1) {
      color: #333333;
      font-size: 32px;
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .legend-container {
    position: absolute;
    top: 76px;
    right: 72px;
    .legend {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      margin-bottom: 32px;
      .icon {
        width: 16px;
        height: 16px;
        margin-right: 10px;
      }
      .icon_1 {
        background: url(https://jszhgd.cn/static/pc/low-code/icon_1.png)
          no-repeat;
        background-size: 100% 100%;
      }
      .icon_2 {
        background: url(https://jszhgd.cn/static/pc/low-code/icon_2.png)
          no-repeat;
        background-size: 100% 100%;
      }
      .icon_3 {
        background: url(https://jszhgd.cn/static/pc/low-code/icon_3.png)
          no-repeat;
        background-size: 100% 100%;
      }
      .name {
        font-size: 14px;
        color: #666666;
        margin-right: 24px;
      }
      .value {
        font-weight: 400;
        font-size: 18px;
        color: #333333;
      }
    }
    :nth-child(3) {
      margin-bottom: 0;
    }
  }
}
</style>
